<template>
	<view class="specification-wrap">
		<view class="header">
			<view class="goods-title">{{goods.name}}</view>
			<view class="goods-subtitle">{{goods.goods_desc}}</view>
		</view>
		<view class="content">
			<view class="block" v-for="(item, index) in specification" :key="item.title">
				<view class="block-title">{{item.title}}</view>
				<view class="block-items">
					<p 
						v-for="(it, i) in item.options" 
						:key="it" 
						@click="handleClick(index, it)" 
						:class="{item: true, active: selected[index] === it}"
					>
						{{it}}
					</p>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="price">
				<p>总计</p>
				<span class="symbol">¥</span>
				<span class="num">{{goods.price * (goods.num || 1)}}</span>
			</view>
			<view class="add-wrap">
				<block v-if="goods.num">
					<image 
						@click="$emit('onChangeGoods', [selected, -1])" 
						@touchstart="minusIsStart = true"
						@touchend="touchend('minusIsStart')"
						:class="{minus: true, scale: minusIsStart}"
						src="@/static/subtraction.png">
					</image>
					<span>{{goods.num}}</span>
				</block>
				<image 
					@click="$emit('onChangeGoods', [selected, 1])" 
					@touchstart="addIsStart = true"
					@touchend="touchend('addIsStart')"
					:class="{add: true, scale: addIsStart}"
					src="@/static/add.png" 
					mode="heightFix">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'specification-card',
		data() {
			return {
					selected: [],
					addIsStart: false,
					minusIsStart: false,
			}
		},
		props: ['goods', 'isShow'],
		computed: {
			specification() {
				return this.goods.specification
			}
		},
		watch: {
			isShow(flag) {
				if (flag) {
					const specification = this.specification
					this.selected = Array.from({length: specification.length}, (_, i) => specification[i].options[0])
				}
			}
		},
		methods: {
			handleClick(index, item) {
				this.$set(this.selected, index, item)
				this.$emit('clearGoodsNum')
			},
			touchend(key) {
				setTimeout(() => this[key] = false, 200)
			},
		}
	}
</script>

<style lang="scss">
	.specification-wrap {
		width: 640rpx;
		min-height: 700rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		
		.header {
			padding: 0 0 16rpx;
			border-bottom: 1px solid #f0f0f0;
			
			.goods-title {
				font-size: 30rpx;
				font-weight: bold;
			}
			.goods-subtitle {
				font-size: 26rpx;
				color: #c1c1c1;
			}
		}
		.content {
			flex: 1;
			max-height: 600rpx;
			overflow-y: scroll;
			padding: 20rpx 0;
			.block {
				margin-bottom: 20rpx;
				.block-title {
					font-size: 26rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.block-items {
					display: flex;
					flex-wrap: wrap;
					.item {
						margin: 10rpx 0;
						margin-right: 14rpx;
						padding: 8rpx 26rpx;
						border: 1px solid #f0f0f0;
						border-radius: 12rpx;
						color: #000;
						font-size: 24rpx;
					}
					.active {
						border: 1px solid #004EA2;
						color: #004EA2;
					}
				}
			}
		}
		.bottom {
			height: 60rpx;
			border-top: 1px solid #f0f0f0;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			.price {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				p {
					margin-right: 4rpx;
				}
				.symbol {
					font-size: 24rpx;
					font-weight: bold;
					margin: 4rpx 2rpx 0 0;
					color: #eb5232;
				}
				.num {
					font-weight: bold;
					color: #eb5232;
				}
			}
			.add-wrap {
				height: 40rpx;
				margin-left: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.minus, .add {
					transition: all .2s ease;
					transform: scale(1);
				}
				.scale {
					transform: scale(0.8);
				}
				.minus {
					width: 48rpx;
					height: 48rpx;
				}
				span {
					font-size: 30rpx;
					color: #000000;
					margin: 0rpx 28rpx 0 25rpx;
				}
				.add {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>